<template>
	<view class="pages-box rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="公告通知" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		
		<view class="pd-lg fill-base mt-md">
			<view class="flex-center">
				<view class="box-item-header flex-center" :style="{background: `linear-gradient(133deg, ${subColor} 0%, ${primaryColor} 100%)`}">
					<i class="iconfont icongonggaotongzhi c-base" style="font-size: 20px;"></i>
				</view>
				<view class="pl-md flex-1">
					<view class="f-ms-title text-bold">系统消息</view>
					<view class="f-mini-title c-A5A7B4">2023.08.10 08.10</view>
				</view>
			</view>
			<view class="f-title box-item-cont">平台升级为2.0, 主要针对用户登陆问题</view>
			<view class="flex-warp pt-lg">
				<image src="https://lbqny.migugu.com/admin/diy/default.png" :class="[{'ml-sm': index % 3}]" mode="aspectFill" class="item-image mb-sm radius-24" v-for="(item,index) in 7" :key="index"></image>
			</view>
		</view>
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.initIndex()
		},
		async onShow() {},
		async onReachBottom() {},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
			}
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.c-A5A7B4{
			color: #A5A7B4;
		}
		.box-item-header{
			width: 70rpx;
			height: 70rpx;
			border-radius: 70rpx;
		}
		.box-item-cont{
			padding-top: 30rpx;
		}
		.item-image{
			width: 223rpx;
			height: 223rpx;
		}
	}
</style>
